//全局变量存放数据，便于调试
var province = [];
var currentConfirmedCount = [];
var cured = [];
var dead = [];
var suspected = [];
var sp = ["福建", "江苏", "广东", "四川", "安徽", "浙江"]; //筛选的省份
var sc = []; //筛选省份的确诊人数
var cureds = [];
var deads = [];
var suspecteds = [];
var sb = []; //筛选省份的{name,确诊人数}

/*  省份顺序
    ["台湾","天津","陕西","福建","江苏","辽宁","云南","广东","四川","上海",
    "湖北","湖南","河南","北京","内蒙古","广西","重庆","澳门","甘肃","安徽",
    "山东","浙江","山西","黑龙江","海南","宁夏","河北","青海","江西","吉林",
    "西藏","新疆","贵州","香港"] */

let url_get = "province?method=queryNowProvinceJson";
$.get(url_get, function (data, status) {
    province = [];
    currentConfirmedCount = [];
    cured = [];
    dead = [];
    suspected = [];
    for (let item of data) {
        province.push(item["chinesename"]);
        currentConfirmedCount.push(item["currentConfirmedCount"]);
        cured.push(item["cured"]);
        dead.push(item["dead"]);
        suspected.push(item["suspected"]);
    }
    let d = [];
    let china_chart = echarts.init(document.getElementById('china_chart'));
    let COLORS = ["#ffffff", "#fdf368", "#fdad4b", "#fb5173", "#bb3937", "#772526", "#480f10"]; //图例里的颜色
    for (let i = 0; i < province.length; i++) {
        d.push({
            name: province[i],
            value: currentConfirmedCount[i]
        })
    }
    d.push({
        name: "南海诸岛",
        value: 0
    })
    china_chart.setOption({
        tooltip: {
            formatter: function (params) { //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
                return params.seriesName + '<br />' + params.name + '：' + params.value
            } //数据格式化
        },
        visualMap: { //visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
            type: 'piecewise', //分段型视觉映射组件
            pieces: [{ //自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。
                value: 0,
                color: COLORS[0]
            }, {
                min: 1,
                max: 9,
                color: COLORS[1]
            }, {
                min: 10,
                max: 99,
                color: COLORS[2]
            }, {
                min: 100,
                max: 499,
                color: COLORS[3]
            }, {
                min: 500,
                max: 999,
                color: COLORS[4]
            }, {
                min: 1000,
                max: 10000,
                color: COLORS[5]
            }, {
                min: 10000,
                color: COLORS[6]
            }],
            inRange: {
                color: COLORS //取值范围的颜色
            },

            show: false //图注
        },
        geo: { //地理坐标系组件用于地图的绘制
            map: 'china',
            roam: false, //不开启缩放和平移
            zoom: 1.23, //视角缩放比例
            label: {
                normal: {
                    show: false,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)'
                }
            },
            itemStyle: {
                normal: { // 普通状态下的样式
                    // areaColor: '#3399cc',
                    borderColor: '#333333',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 5
                },
                emphasis: {
                    areaColor: '#F3B329', //鼠标选择区域颜色
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
            },
            label: {
                emphasis: {
                    show: false
                }
            },
        },
        series: [ //系列列表。（图表）
            {
                name: '现存确诊人数',
                type: 'map', //图表类型
                geoIndex: 0,
                data: d //图表的数据
            }
        ]
    })
    //筛选出需要的数据
    sc = [];
    cureds = [];
    deads = [];
    suspecteds = [];
    sb = [];
    for (let i = 0; i < province.length; i++) {
        if (sp.includes(province[i])) {
            sc.push(currentConfirmedCount[i]);
            cureds.push(cured[i]);
            deads.push(dead[i]);
            suspecteds.push(suspected[i]);
            sb.push({
                name: province[i],
                value: currentConfirmedCount[i]
            })
        }
    }

    //绘制柱形图
    let zxt = echarts.init(document.getElementById('zhuxintu'));
    let option = {
        tooltip: {},
        legend: {
            data: ['现存确诊人数', '疑似人数', '死亡人数']
        },
        xAxis: {
            data: sp
        },
        yAxis: {},
        series: [{
            name: '现存确诊人数',
            type: 'bar',
            barGap: 0,
            data: sc
        }, {
            name: '疑似人数',
            type: 'bar',
            data: suspecteds
        }, {
            name: '死亡人数',
            type: 'bar',
            data: deads
        }]
    };
    zxt.setOption(option);

    //绘制饼状图
    let pie = echarts.init(document.getElementById('pie'));
    let pie_option = {
        legend: {
            orient: "vertical",
            left: "left",
            data: sp
        },
        series: [{
            type: "pie",
            data: sb,
            stillShowZeroSum: true,
            selectedMode: false
        }]
    }
    pie.setOption(pie_option);
});

$(document).ready(function () {
    $("#updatebtn").click(function () {
        let date = $("#dateinput").val();
        if (date == '')
            return;
        //查询带日期的内容
        let url_get = "province?method=queryProvinceJson&date=" + date;
        $.get(url_get, function (data, status) {
            province = [];
            currentConfirmedCount = [];
            cured = [];
            dead = [];
            suspected = [];
            for (let item of data) {
                province.push(item["chinesename"]);
                currentConfirmedCount.push(item["currentConfirmedCount"]);
                cured.push(item["cured"]);
                dead.push(item["dead"]);
                suspected.push(item["suspected"]);
            }
            //准备地图的数据
            let d = [];
            for (let i = 0; i < province.length; i++) {
                d.push({
                    name: province[i],
                    value: currentConfirmedCount[i]
                })
            }
            d.push({
                name: "南海诸岛",
                value: 0
            })
            //更新地图数据
            let china_chart = echarts.init(document.getElementById('china_chart'));
            let map_option = china_chart.getOption();
            map_option.series[0].data = d;
            china_chart.clear();
            china_chart.setOption(map_option);
            //数据筛选
            sc = [];
            cureds = [];
            deads = [];
            suspecteds = [];
            sb = [];
            for (let i = 0; i < province.length; i++) {
                if (sp.includes(province[i])) {
                    sc.push(currentConfirmedCount[i]);
                    cureds.push(cured[i]);
                    deads.push(dead[i]);
                    suspecteds.push(suspected[i]);
                    sb.push({
                        name: province[i],
                        value: currentConfirmedCount[i]
                    })
                }
            }
            //更新柱形图
            let zxt = echarts.init(document.getElementById('zhuxintu'));
            let zxt_option = zxt.getOption();
            zxt_option.series[0].data = sc;
            zxt_option.series[1].data = suspecteds;
            zxt_option.series[2].data = deads;
            zxt.clear();
            zxt.setOption(zxt_option);
            //更新饼状图
            let pie = echarts.init(document.getElementById('pie'));
            let pie_option = pie.getOption();
            pie_option.series[0].data = sb;
            pie.clear();
            pie.setOption(pie_option);
        })
    })
})
